<template>
  <div>
    <el-input v-model="queryValue" placeholder="Serach" style="width:92%" @focus="query" />
    <i class="el-icon-close" style="cursor: pointer;" @click="clearQuery" />
    <i style="margin-left:10px;cursor: pointer;" class="el-icon-bottom" @click="selectDown" />
    <i style="margin-left:10px;cursor: pointer;" class="el-icon-top" @click="selectUp" />
    <el-table
      ref="generalTable"
      :data="generalData"
      :row-class-name="tableRowClassName"
      highlight-current-row
      height="310px"
      style="width:100%;overflow: auto;"
      border
      @row-click="tableRow"
    >
      <el-table-column
        v-for="item in tableHead"
        :key="item.label"
        :label="item.label"
        :property="item.property"
        :width="item.width"
      />
    </el-table>
    <div style="float:right;margin:5px 0;right:10px;position:relative">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    generalData: {
      type: Array,
      default: function () {
        return []
      }
    },
    tableHead: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      index: 0,
      queryValue: '',
      total: 0, // 总条数
      pagesize: 6, // 每页的条数
      currentPage: 1 // 默认开始页面
    }
  },
  watch: {
    /*  generalData: function() {
        debugger
      this.$nextTick(function() {
        const index = this.index;
        if (index !== -1) {
          this.$refs.generalTable.setCurrentRow(this.generalData[index]);
          const row = this.generalData[this.index];
          this.$emit("tableRow", row);
        } else {
          this.$refs.generalTable.setCurrentRow(this.generalData[0]);
          this.index = 0;
          const row = this.generalData[this.index];
          this.$emit("tableRow", row);
        }
      });
    } */
  },
  mounted () {
    this.$refs.generalTable.setCurrentRow(this.generalData[0])
    const row = this.generalData[0]
    this.$emit('tableRow', row)
  },
  created () {},
  methods: {
    // 接收父组件传的值，新增的数据默认为选中状态
    childMethod: function (index) {
      this.index = 0
      this.$refs.generalTable.setCurrentRow(this.generalData[0])
      const row = this.generalData[0]
      this.$emit('tableRow', row)
    },
    // 分页器
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    // 把每一行的索引放进row
    tableRowClassName ({ row, rowIndex }) {
      row.indexes = rowIndex
    },
    query: function (value) {
      this.$emit('query', value)
    },
    // 单击行选中
    tableRow: function (row) {
      this.$emit('tableRow', row)
    },
    // 点击表格上的×
    clearQuery: function () {
      this.queryValue = ''
    },
    // 点击向下箭头
    selectDown: function () {
      const index = this.index
      if (index !== this.generalData.length - 1) {
        this.index = index + 1
        this.$refs.generalTable.setCurrentRow(this.generalData[this.index])
      } else {
        this.index = 0
        this.$refs.generalTable.setCurrentRow(this.generalData[this.index])
      }
      const row = this.generalData[this.index]
      this.$emit('tableRow', row)
    },
    // 点击向上箭头
    selectUp: function () {
      const index = this.index
      if (index !== 0) {
        this.index = index - 1
        this.$refs.generalTable.setCurrentRow(this.generalData[this.index])
      } else {
        this.index = this.generalData.length - 1
        this.$refs.generalTable.setCurrentRow(this.generalData[this.index])
      }
      const row = this.generalData[this.index]
      this.$emit('tableRow', row)
    }
  }
}
</script>
